import React, { Component } from 'react'
import HocRouter from '../../utils/HocRouter'
export class ShopCar extends Component {
    state={
        shopCar:[],
        Allprice:0,
        allChecked:false
    }
    componentDidMount(){
        console.log(this.props);
        this.setState({shopCar:this.props.location.state})
        // this.computePrice(this.props.location.state)
    }
    //封装了一个计算总价的方法
    // computePrice(shopCar){
    //     let num=0
    //     shopCar.forEach(item=>{
    //          num += item.price * item.count
    //     })
    //     this.setState({Allprice:num})
    // }
    //封装了一个点击选中计算总价的方法
    computePrice(shopCar){
        console.log(shopCar);
        let sum = 0
        shopCar.forEach(item=>{
            if (item.checked) {
                sum+= item.price * item.count
            }
        })
        this.setState({Allprice:sum})
    }
    add(index){
        let shopCar = this.state.shopCar
        shopCar[index].count++
        this.setState({shopCar:shopCar})
        this.computePrice(shopCar)
    }

    del(index){
        let shopCar = this.state.shopCar
        shopCar[index].count--
        // shopCar[index].count>0?shopCar[index].count--:shopCar[index].count=0
        this.setState({shopCar:shopCar})
        this.computePrice(shopCar)
    }
    //点击单个
    oneCheck(index){
        let shopCar = this.state.shopCar
        shopCar[index].checked = ! shopCar[index].checked

        let flag = shopCar.every(item=>{
            return item.checked
        })

        this.setState({shopCar:shopCar,allChecked:flag})
        this.computePrice(shopCar)
    }
    //点击全选
    AllCheckout(e){
        let shopCar = this.state.shopCar
        shopCar.forEach(item=>{
            item.checked = e.target.checked
        })
        this.setState({shopCar:shopCar,allChecked:e.target.checked})
        this.computePrice(shopCar)
    }

    render() {
        let {shopCar,Allprice,allChecked} = this.state
        return (
            <div>
                ShopCar
                <p>全选：<input type="checkbox" checked={allChecked} onChange={this.AllCheckout.bind(this)}/></p>
                <p>总价：{Allprice}</p>
                {
                    shopCar&&shopCar.map((item,index)=>{
                        return  <div 
                            key={index} 
                            style={{display:"flex"}}
                            >
                            <input type="checkbox" checked={item.checked} onChange={this.oneCheck.bind(this,index)}/>
                            <img src={item.img} alt="" />
                            <p>{item.title}</p>
                            <p>price:{item.price}</p>
                            <button disabled={item.count <= 0?true:false} onClick={this.del.bind(this,index)}>---</button>
                            <p style={{fontSize:"30px"}}>count:{item.count}</p>
                            <button onClick={this.add.bind(this,index)}>+++</button>
                        </div>
                    })
                }
            </div>
        )
    }
}

export default HocRouter(ShopCar)
